<template>
	<div>
		<section class="content-container">
			<div class="grid-content bg-purple-light">
				<transition>
					<router-view></router-view>
				</transition>
			</div>
		</section>
		<div class="footer">
			<div class="item" :class="{icon11: footerIndex === 1, icon1: footerIndex !== 1}" @click="footerEvent(1)">首页</div>
			<div class="item" :class="{icon11: footerIndex === 2, icon1: footerIndex !== 2}" @click="footerEvent(2)">首页</div>
			<div class="item" :class="{icon33: footerIndex === 3, icon3: footerIndex !== 3}" @click="footerEvent(3)"><img id="imgAsk" class="icon-ask" style="width:5rem;height:5rem;" src="../images/anniu2.png"></div>
			<div class="item" :class="{icon44: footerIndex === 4, icon4: footerIndex !== 4}" @click="footerEvent(4)">我的</div>
			<div class="item" :class="{icon11: footerIndex === 5, icon1: footerIndex !== 5}" @click="footerEvent(5)">首页</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				popupVisible: false,
				footerIndex: 0
			};
		},
		methods: {
			footerEvent(num) {
				this.footerIndex = num;
				if (num === 1) {
					this.$router.push({
						path: `/Index`
					});
					this.popupVisible = false;
				};
				if (num === 2) {
					this.popupVisible = true;
				};
				if (num === 3) {
					this.$router.push({
						path: `/My`
					});
					this.popupVisible = false;
				};
				if (num === 4) {
					this.$router.push({
						path: `/Publishpro`
					});
					this.popupVisible = false;
				};
				if (num === 5) {
					this.$router.push({
						path: `/Publish`
					});
					this.popupVisible = false;
				}
			},
			closefade() {
				this.popupVisible = false;
			}
		},
		created() {}
	};
</script>

<style lang="less">
	.content-container {
		height: 100%;
	}
	.icon {
		position: absolute;
		bottom: 6px;
		z-index: 9999;
		left: 50%;
		margin-left: -2.5rem;
	}
	.v-modal {
		opacity: 0;
		background: #fff;
	}
	.footer {
		display: flex;
		height: 50px;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		.item {
			width: 100%;
			height: 100%;
			line-height: 75px;
			color: #888;
			font-size: 12px;
			text-align: center;
			.icon-ask {
				position: absolute;
				display: inline-block;
				left: 50%;
				bottom: 30px;
				-webkit-transform: translate(-50%, 30%);
				transform: translate(-50%, 30%);
				z-index: 9999999999999999999;
			}
			&.icon1 {
				background: url('../images/shouye2.png') no-repeat center 25%;
				background-size: 20px;
			}
			&.icon11 {
				color: #ff6700;
				background: url('../images/shouye1.png') no-repeat center 25%;
				background-size: 20px;
			}
			&.icon2 {
				background: url('../images/tiewn2.png') no-repeat center 25%;
				background-size: 20px;
			}
			&.icon22 {
				color: #ff6700;
				background: url('../images/tiewn1.png') no-repeat center 25%;
				background-size: 20px;
			}
			&.icon4 {
				background: url('../images/wode1.png') no-repeat center 25%;
				background-size: 20px;
			}
			&.icon44 {
				color: #ff6700;
				background: url('../images/wode2.png') no-repeat center 25%;
				background-size: 20px;
			}
		}
	}
	.mint-popup-bottom {
		width: 100%;
		.fade-block {
			-webkit-box-shadow: 0 -2px 10px #ccc;
			-moz-box-shadow: 0 -2px 10px #ccc;
			box-shadow: 0 -2px 10px #ccc;
			display: flex;
			height: 10rem;
			position: fixed;
			bottom: 3.2rem;
			width: 100%;
			background: #fff;
			.item {
				width: 100%;
				height: 100%;
				line-height: 216px;
				color: #888;
				font-size: 12px;
				text-align: center;
				.icon-ask {
					position: absolute;
					display: inline-block;
					left: 50%;
					bottom: 30px;
					-webkit-transform: translate(-50%, 30%);
					transform: translate(-50%, 30%);
				}
				&.icon1 {
					background: url('../images/shouye1.png') no-repeat center 30%;
					background-size: 60px;
				}
				&.icon4 {
					background: url('../images/shouye1.png') no-repeat center 30%;
					background-size: 60px;
				}
			}
		}
	}
</style>